<template>
  <div class="text_content need_bg">
    <div v-if="props.message.contentType === MessageType.CustomMessage">
      <img v-if="isVideoCall" :src="videoCallIcon" alt="" />
      <img v-if="!isVideoCall" :src="vociecallIcon" alt="" />
    </div>
    <rtc-modal v-if="showRtcModal" :inviteData="inviteData"></rtc-modal>
  </div>

</template>

<script setup lang="ts">
import { MessageType } from "@openim/wasm-client-sdk";
import { ExedMessageItem } from "./data";
import { CustomType } from "@/constants/enum.ts";
import { getBusinessInfo } from "@/api/user";

import hungup from "@/assets/images/rtc/hungup.png";
import accept from "@/assets/images/rtc/accept.png";
import videoCallIcon from "@/assets/images/rtc/video_call.png";
import vociecallIcon from "@/assets/images/rtc/voice_call.png";
import { InviteData, ParticipantInfo } from "@/pages/rtc/data";
import rtcModal from "@/pages/rtc/index.vue";
import type {
  MessageItem,
  RtcInvite,
  WSEvent,
} from "@openim/wasm-client-sdk/lib/types/entity";

import { computed } from "vue";
import { ChatFooterActionType } from "@/constants/action";
const showRtcModal = ref(false);
const inviteData = reactive<InviteData>({});

type CustomMsgRendererProps = {
  message: ExedMessageItem;
}

const props = defineProps<CustomMsgRendererProps>();
const msgData = JSON.parse(props.message.customElem?.data)
const msgJson = JSON.parse(msgData.data)
let rtcInvite = undefined as undefined | RtcInvite;
const isCustomMsg = props.message.contentType === MessageType.CustomMessage;
console.log("zsq-custome-elem", msgJson)
const isVideoCall = msgJson.mediaType === "video";


const content = computed(() => {
  return "已取消";
});

const closeRtcModalHandler = () => {
  showRtcModal.value = false;
};

const openRtcModalHandler = () => {
  if (msgData.customType === CustomType.CallingInvite) {
    // rtcInvite = JSON.parse(customData.data);
    // rtcInvite = msgJson
    // console.log("zsq-custome-elem-rtcInvite", rtcInvite)
    // const timeDifference = Date.now() / 1000 - msgJson.initiateTime;
    // if (timeDifference <= 300) {
    //   getBusinessInfo(rtcInvite.inviterUserID).then(({ data: { users } }) => {
    //     console.log("zsq-inviterUserID", rtcInvite["inviterUserID"])
    //     if (users.length === 0) return;
    //     inviteData.invitation = rtcInvite;
    //     inviteData.participant = {
    //       userInfo: {
    //         nickname: users[0].nickname,
    //         faceURL: users[0].faceURL,
    //         userID: users[0].userID,
    //         ex: "",
    //       },
    //     };
    //     showRtcModal.value = true;
    //   });
    // }
  }
};

onMounted(() => {
  // openRtcModalHandler()
});

onUnmounted(() => {
});
</script>

<style lang="scss" scoped>
.text_content {
  word-break: break-all;
  word-wrap: break-word;
  display: flex;
  align-items: center;
}

.text_content img {
  margin-right: 8px;
}
</style>
